<template>
  <el-container class="home-container">
    <!--头部区域-->
    <el-header class="home-heard">
      <div>
        <img src="../assets/logo.png" alt=""/>
        <span>系统名称</span>
      </div>
      <div>
        <!-- 退出功能就是 清空token 并跳转到登录页面   -->
        <el-button @click="logout">退出</el-button>
      </div>
    </el-header>
    <!--页面主体区域-->
    <el-container>
      <!--侧边栏-->
      <el-aside class="home-aside" :width="isCollapse===true?'63px':'200px'">
        <div class="toggleButton" @click="isCollapse=!isCollapse">|||</div>
        <!-- 菜单栏
        active-text-color 选择的文字颜色
        unique-opened 是否只保持一个子菜单的展开
        collapse 是否水平折叠收起菜单
        collapse-transition 关闭动画效果
        -->
        <el-menu
            text-color="#fff"
            background-color="#333744"
            active-text-color="#409EFF"
            :collapse="isCollapse"
            :collapse-transition="false"
        >
          <!--一级菜单-->
          <!--每个菜单的index必须唯一 字符串
          为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性
          key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
           有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
          -->
          <el-sub-menu
              :index='item._id+""'
              :key="item._id"
              v-for="item in menuList"
          >
            <template #title>
              <!--图标-->
              <el-icon>
                <Menu/>
              </el-icon>
              <!--文本内容-->
              <span>{{ item.name }}</span>
            </template>
            <!--二级菜单-->
            <el-menu-item
                :key="cItem._id"
                :index='cItem._id+""'
                v-for="cItem in item.children"
            >
              <!--模板区域  -->
              <template #title>
                <el-icon>
                  <Edit/>
                </el-icon>
                <span @click="toPath(cItem)"> {{ cItem.name }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!--右侧内容区域-->
      <el-main class="home-main">
        <!--设置路由，跳转到home下面的子路由-->
        <router-view :key="templateId"></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import {getMenuInfo, getSessionUserItem} from '@/components/request/api'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  methods: {
    /*退出*/
    logout() {
      window.sessionStorage.clear();
      this.$router.push('/login')
    },
    /*跳转*/
    toPath(item) {
      /*可以用elementUi 自带的 router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	boolean*/
      console.log('跳转', item.templateId)
      if (item.path) {
        this.templateId = item.templateId;
        window.localStorage.setItem('sys_template', this.templateId);
        // this.$router.push({ name: item.path, params: { templateId: item.templateId } })
        this.$router.push({path: item.path, query: {'templateId': item.templateId}});
        // this.$router.push({ name: item.path, params: { "templateId": item.templateId } });
        // location.reload()
        // this.$router.push({ name: item.path, params: `${item.templateId}` } )
      } else {
        this.$message.error("path错误")
      }

    },
    /**
     * 设置菜单列表
     */
    setMenuInfo() {
      this.menuList = getMenuInfo()
      console.log('menuList :', this.menuList)
    }
  },
  data() {
    return {
      //菜单数据
      menuList: [],
      //左侧菜单是否折叠的标识默认 false 不折叠
      isCollapse: false,
      templateId: "",
    }
  },
  mounted() {
    // const userInfo = getSessionUserItem()
    this.setMenuInfo();
    // getMenuInfo(userInfo)
    //     .then((res) => {
    //       if (res.data.code === 200) {
    //         this.menuList = res.data.data;
    //         // console.log(this.menuList)
    //       } else {
    //         this.$message.error(res.data.message)
    //       }
    //     }).catch((error) => {
    //   this.$message.error(error)
    // })
  }
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}

.home-heard {
  background-color: #373d41;
  /*布局 两端*/
  display: flex;
  justify-content: space-between;

  > div {
    display: flex;
    /*纵向居中*/
    align-items: center;
  }

  img {
    height: 100%;
    border-radius: 50%;
  }

  span {
    color: #fff;
    //设置文字和图标外边距
    margin-left: 15px;
  }
}

.home-aside {
  background-color: #333744;
  //折叠按留样式
  .toggleButton {
    background-color: #4a5064;
    color: #fff;
    font-size: 10px;
    line-height: 24px;
    //居中
    text-align: center;
    //文字的间距
    letter-spacing: 0.2em;
    //鼠标移动上的显示是手
    cursor: pointer;
  }
}

.home-main {
  background-color: #eaedf1;
}
</style>
